<template>
  <div class="fa-sign-setting">
    <ElFormItem prop="followSignSize" label="印章规格">
      <ElRadioGroup class="spec-group" v-model="data.followSignSize">
        <div class="spec-item">
          <ElRadio :label="true" :disabled="disabled">以参与方印章规格加盖</ElRadio>
        </div>

        <div class="spec-item">
          <ElRadio :label="false" :disabled="disabled">自定义规格</ElRadio>

          <a v-if="!disabled && !data.followSignSize" class="fa-widget-link" @click.prevent.stop="reset">恢复默认</a>
        </div>
      </ElRadioGroup>
    </ElFormItem>

    <div class="spec-custom" v-if="!data.followSignSize">
      <SignSpec :data="data" :disabled="disabled" />

      <a
        class="link-btn fa-icon-linked"
        :class="{ 'is-active': data.keepSignAspect, 'is-disabled': disabled }"
        @click="!disabled && (data.keepSignAspect = !data.keepSignAspect)"
        :title="data.keepSignAspect ? '取消宽高比例' : '锁定宽高比例'"
      ></a>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, watch } from 'vue'
import { Widget } from '@/models'
import SignSpec from './SignSpec.vue'

/** 签章设置 */
export default defineComponent({
  name: 'FaSignSetting',

  components: { SignSpec },

  props: {
    /** 控件数据 */
    data: {
      type: Widget,
      required: true
    },

    /** 是否禁用 */
    disabled: {
      type: Boolean,
      default: false
    }
  },

  setup(props) {
    /** 重置 */
    function reset() {
      resetSize()
      keepAspect()
    }

    /** 重置控件尺寸 */
    function resetSize() {
      const widget = props.data
      const { width: w, height: h } = widget.option

      Object.assign(widget, { w, h })

      widget.restoreOrigin()
    }

    /** 保持比例 */
    function keepAspect() {
      props.data.keepSignAspect = true
    }

    /** 跟随签章规格则控件使用默认尺寸 */
    watch(
      () => props.data.followSignSize,
      follow => {
        if (follow) {
          resetSize()
        } else {
          keepAspect()
        }
      }
    )

    /** 保持签章规格比例，更改时更新比例值 */
    watch(
      () => props.data.keepSignAspect,
      keep => {
        const widget = props.data

        if (widget.isSet) {
          widget.aspectRatio = keep ? widget.w / widget.h : 0
        }
      },
      { immediate: true }
    )

    return {
      /** 重置 */
      reset
    }
  }
})
</script>

<style lang="scss">
.fa-sign-setting {
  .spec-group {
    display: block;

    .el-radio {
      margin-right: 0;
      line-height: inherit;

      &__label {
        font-size: 12px;
      }
    }

    .fa-widget-link {
      float: right;
    }
  }

  .spec-custom {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
  }

  .spec-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 28px;
  }

  .fa-sign-spec {
    padding-left: 24px;

    .el-input-number {
      width: 80px;
    }
  }

  .size-item.el-form-item:last-child {
    margin-bottom: 0;
  }

  .link-btn {
    margin-left: 24px;
    color: $color-info-light;
    font-size: 16px;
    cursor: pointer;
    user-select: none;

    &__col {
      padding-top: 33px;
      text-align: center;
    }

    &.is-active {
      color: $color-primary;
    }

    &.is-disabled {
      cursor: default;
      opacity: 0.8;
    }
  }
}
</style>
